<template>
  <div>
    <p>{{ count }}</p>
    <!-- <Button
      :value="count"
      @input="
        (num) => {
          count = num;
        }
      "
    /> -->
    <Button v-model="count" />
  </div>
</template>
<script>
// 以前：v-model展示只能用在input等表单标签上
// 目标：使用v-model，父盒子组件实现数据双向绑定（高级技巧）
// 1.创建button组件，引入注册使用
// 2.父传子，传入count变了给value属性
// 3.子传父自定义事件把新的值传出来

// 结论：
// 父子组件之间，用一次v-model双向关联一个变量
// 前提：需要子组件配合（子组件里必须叫value和input）
import Button from '@/components/button'
export default {
  data () {
    return {
      count: 0
    }
  },
  components: {
    Button
  }
}
</script>